{include file='common/_meta' /}
<style>
</style>
<body>
<div class="layui-fluid" style="background-color: #fff; padding: 10px;min-height:100%">
<div class="layui-row">
<div class="layui-col-xs12 layui-col-md8">
	<!-- <div class="layui-row"> -->
		<div class="layui-col-xs12" style="background:#20222A;color:#fff;padding:10px 10px">
		<h3>快捷菜单</h3>
		</div>
	<!-- </div> -->
	<!-- <div class="layui-row"> -->
		{volist name="configkj" id="cf"}
		<div class="layui-col-xs12 layui-col-md6">
			<blockquote class="layui-elem-quote" style="margin: 0px;background:#fff;border-bottom:3px solid #ccc;border-right:0.5px solid #ccc">
				<a href="javascript:;" data-ls="ls-{$cf.id}" onclick="tabAdd(this)"><h4><i class="layui-icon {$cf.icon}"></i> {$cf.name}</h4></a>
			</blockquote>
		</div>
		{/volist}
		<div class="layui-col-xs12" style="margin-top:10px">
		<table class="layui-table" style="margin: 0px;">
			<colgroup>
				<col width="130">
				<col>
			</colgroup>
			<tbody>
				<tr>
					<td>账号名称</td>
					<td>{:session('username')}</td>
				</tr>

                <tr>
                    <td>用户ID</td>
                    <td>{:session('relate_id')}</td>
                </tr>

				<tr>
					<td>公司名称</td>
					<td>{:session('channel_name')}</td>
				</tr>
				<tr>
					<td>结算币种</td>
					<td>{$channel_info.currency}</td>
				</tr>

			</tbody>
		</table>
		</div>
	<!-- </div> -->
</div>
<div class="layui-col-xs12 layui-col-md4" style="padding-left:10px;padding-top:20px">
	<h4 id="datatime"></h4>
	<div id="error_main" style="width: 100%;height:300px;"></div>
</div>
</div>

</div>
{include file="common/_footer"}
<script type="text/javascript" src="{:$Think.config.__STATIC__}/js/echarts.js"></script>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript">

layui.use(['layer'], function() {



});

$(function(){
	bingzEchartsGet();
})

function tabAdd(obj)
{
	parent.tabAdd($(obj).data("ls"));
}
function bingzEchartsGet()
{
    // 异步加载数据
    $.post("{:url('OrderReport/index')}?api=1&page=1&limit=1").done(function (data) {
		if(data.count)
		{
			//饼状图,初始化echarts实例
			var error_main = echarts.init(document.getElementById('error_main'));
			
			bingzInit(error_main,
			        {
			            "titleName":"短信发送量",
			            "dataName":["成功","失败"],
			            "dataValue":[data['data'][0].success,data['data'][0].failed]
			        });
		}
    });
}

/*饼状图*****************************************************************/
//初始化饼状图
function bingzInit(obj,info)
{
    var legendSelected = {};
    var seriesData = [];
    var dataName = info.dataName;
    var dataValue = info.dataValue;

    for (var i in dataName) {
        legendSelected[dataName[i]] = true;
        seriesData.push({
            name: dataName[i],
            value: dataValue[i]
        });
    }
    option = {
        // 全局调色盘。
        color: ['#009688','#c23531','#B3B3B3', '#61a0a8', '#d48265', '#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
        title : {
            text: info.titleName,
            subtext: '饼状分布',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: dataName,

            selected: legendSelected
        },
        series : [
            {
                name: '量',
                type: 'pie',
                radius : '55%',
                label: {
                    normal: {
                        formatter: '{b}({d}%)',
                    }
                },
                center: ['40%', '50%'],
                data:   seriesData,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    // 填入数据
    obj.setOption(option);
    // bingzEchartsGet(obj,sta)

}
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>